import React from "react";
import {
  createBrowserRouter,
  Navigate,
  redirect,
} from "react-router-dom";
import { DashboardOutlined, UserOutlined } from "@ant-design/icons";
import AuthRouter from "./AuthRouter";

const Login = React.lazy(() => import("../pages/login"));
const Home = React.lazy(() => import("../pages/home/index"));
const Blog = React.lazy(() => import("../pages/blog/index"));
const Dashboard = React.lazy(() => import("../pages/dashboard"));
const NotFound = React.lazy(() => import("../pages/404"));
const Users = React.lazy(() => import("../pages/users"));

export const routes = [
  {
    path: "/login",
    Component: Login,
    meta: {
      title: "登录",
      hideMenu: true, // 不在菜单显示
    },
    loader: () => {
      if (localStorage.getItem("token")) {
        // 自动替换历史记录
        return redirect("/");
      }
      return null;
    },
  },
  {
    path: "/",
    element: (
      <AuthRouter>
        <Home />
      </AuthRouter>
    ),
    meta: {
      requiresAuth: true, // 需要登录
      title: "首页",
      icon: <UserOutlined />,
    },
    children: [
      {
        index: true,
        element: <Navigate to="/dashboard" replace />,
        meta: {
          hideMenu: true,
        },
      },
      {
        path: "dashboard",
        element: <Dashboard />,
        meta: {
          title: "仪表盘",
          icon: <DashboardOutlined />,
        },
      },
      {
        path: "blog",
        Component: Blog,
        meta: {
          title: "个人",
          hideMenu: false,
          icon: <UserOutlined />,
        },
      },
    ],
  },
  {
    path: "/new-folder",
    element: (
      <AuthRouter>
        <Users />
      </AuthRouter>
    ),
    meta: {
      requiresAuth: true, // 按需设置是否需要登录
      title: "新目录",
      icon: <UserOutlined />,
    },
  },
  // 404处理
  {
    path: "*",
    element: <NotFound />,
    meta: {
      hideMenu: true,
    },
  },
];

export const router = createBrowserRouter(routes);
